<template>
    <Card>
        <Form ref="columnJson" :model="columnJson">
            <FormItem>
                <Row :gutter="16">
                    <Col span="2">&nbsp;</Col>
                    <Col span="4">
                        <Input v-model="modalName" placeholder="example: user" @on-keyup="handleSearchTable">
                            <Dropdown slot="append" trigger="click">
                                <a href="javascript:void(0)">
                                    <Icon type="umbrella" size="20">&nbsp;</Icon>
                                </a>
                                <DropdownMenu slot="list" v-for="(item, index) in models" :key="index">
                                    <DropdownItem divided style="text-align:left;">
                                        <Button type="warning" @click="handleQuery(item.tablename,item.comments)" style="padding:0px 15px;">
                                            <Icon type="load-b" size="15"></Icon>
                                            <span style="font-size:15px;">{{index+1}} : {{item.tablename}} - {{item.comments}}</span>
                                        </Button>
                                    </DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </Input>
                    </Col>
                    <Col span="4">
                        <Input v-model="modalCName" placeholder="例如: 用户"></Input>
                    </Col>
                    <!--<Col span="4">-->
                        <!--<Input v-model="modalIcon" placeholder="例如: home"></Input>-->
                    <!--</Col>-->
                    <Col span="8">
                        <!--<Button type="warning" icon="ios-cog" @click="handleSubmit">提交</Button>-->
                        <Button type="warning" icon="ios-cog" @click="handleSubmit('uap316')">提交</Button>
                        <Button type="success" icon="plus-round" @click="handleAdd">增加</Button>
                        <!--<Button type="primary" icon="navicon" @click="handleShowItem">菜单代码</Button>-->
                        <!--<a target="_blank" href="https://element.eleme.io/#/zh-CN/component/icon">-->
                            <!--<Button type="error" icon="clipboard">图标库</Button>-->
                        <!--</a>-->
                    </Col>
                    <Col span="2">&nbsp;</Col>
                </Row>
                <Row :gutter="16" style="border-bottom:1px solid #e9eaec;margin-top:15px;">
                    <Col span="2">&nbsp;</Col>
                    <Col span="18">
                        <div style="float:left;">需要生成的文件：&nbsp;</div>
                        <CheckboxGroup v-model="fileTypes" style="float:left;">
                            <Checkbox label="vue"></Checkbox>
                            <Checkbox label="js"></Checkbox>
                        </CheckboxGroup>
                    </Col>
                    <Col span="4">&nbsp;</Col>
                </Row>
                <br>

                <Row :gutter="8">
                    <Col span="9">&nbsp;</Col>
                    <Col span="6">
                        <Input v-model="keywords" @on-keyup="handleSearch">
                            <Icon type="ios-search-strong" slot="prepend" style="padding:0px 10px;"></Icon>
                        </Input>
                    </Col>
                    <Col span="9">&nbsp;</Col>
                </Row>
                <br>

                <Row :gutter="8">
                    <Col span="4"><Input v-model="columnJson[0].columnName"></Input></Col>
                    <Col span="5"><Input v-model="columnJson[0].dataType"></Input></Col>
                    <Col span="3"><Input v-model="columnJson[0].columnLen"></Input></Col>
                    <Col span="4"><Input v-model="columnJson[0].constraintName"></Input></Col>
                    <Col span="8"><Input v-model="columnJson[0].commentName"></Input></Col>
                </Row>
            </FormItem>
            <FormItem v-for="(item, index) in columnJson" v-if="index>0" :key="index">
                <Row :gutter="8">
                    <Col span="4">
                        <Input v-model="item.columnName">
                            <Button slot="append" type="ghost" @click="handleRemove(index)"><Icon type="close"></Icon></Button>
                        </Input>
                    </Col>
                    <Col span="5">
                        <Select v-model="item.dataType">
                            <Option value=""></Option>
                            <Option value="varchar">varchar</Option>
                            <Option value="char">char</Option>
                            <Option value="text">text</Option>
                            <Option value="int">int</Option>
                            <Option value="tinyint">tinyint</Option>
                            <Option value="bigint">bigint</Option>
                            <Option value="date">date</Option>
                            <Option value="datetime">datetime</Option>
						</Select>
                    </Col>
                    <Col span="3">
                        <Input v-model="item.columnLen"></Input>
                    </Col>
                    <Col span="4">
                        <Select v-model="item.constraintName">
                            <Option value=""></Option>
                            <Option value="Input">文本框</Option>
                            <Option value="Select">下拉框</Option>
                            <Option value="CheckboxGroup">多选框</Option>
                            <Option value="RadioGroup">单选框</Option>
                            <Option value="DatePicker">时间选择框</Option>
                            <Option value="textarea">多文本框</Option>
						</Select>
                    </Col>
                    <Col span="8"><Input v-model="item.commentName"></Input></Col>
                </Row>
            </FormItem>

        </Form>

        <!-- 菜单代码 -->
        <Modal
            width="1000"
            v-model="routerItemShow"
            title="菜单代码">
            <p><span v-html="routerItemContent" ></span></p>
        </Modal>

    </Card>
</template>

<script>
const {dialog} = require('electron').remote
const {ipcRenderer} = require('electron')
export default {
    name: 'clientcode',
    data () {
        return {
            fileTypes:['vue','js'],
            modalName: '',
            modalIcon: '',
            modalCName: '',
            keywords:'',
            columnJson: [
                {columnName:'id',dataType:'int',columnLen:'11',constraintName:'PRIMARY KEY',commentName:'主键'}
                ,{columnName:'',dataType:'',columnLen:'',constraintName:'',commentName:''}
                ,{columnName:'',dataType:'',columnLen:'',constraintName:'',commentName:''}
            ],
            columnJsonBak:[
                {columnName:'id',dataType:'int',columnLen:'11',constraintName:'PRIMARY KEY',commentName:'主键'}
                ,{columnName:'',dataType:'',columnLen:'',constraintName:'',commentName:''}
                ,{columnName:'',dataType:'',columnLen:'',constraintName:'',commentName:''}
            ],
            models: [],
            modelsBak: [],
            routerItemShow: false,
            routerItemContent: ''
        };
    },
    methods: {
        handleSubmit (typename) {
            let self = this;
            //删除旧数据
            ipcRenderer.send('delete',__dirname+'\\temp\\')

            let param = new FormData(); //创建form对象
            console.info('JSON.stringify(self.columnJson):'+JSON.stringify(self.columnJson));
            param.append('fileTypes',self.fileTypes.join(","));
            param.append('columnJson',JSON.stringify(self.columnJson));
            param.append('modalName',self.modalName);
            param.append('modalIcon',self.modalIcon);
            param.append('modalCName',self.modalCName);
            param.append('columnLen',self.columnLen);
            param.append('author',localStorage.getItem('account'));
            param.append('projectName',localStorage.getItem('projectname'));
            param.append('dbName',localStorage.getItem('mysqldatabase'));
            param.append('typeName',typename+'-cui');

            self.$axios.post(self.$util.server+'bootCode/cloudcuiclient', param, {
                headers: {
                    "Content-Type":"multipart/form-data"
                }
            }).then(function(response) {
                // 这里是处理正确的回调
                if (response.data.ok) {
                    self.$Message.success('代码生成：成功！');
                    let download_url = self.$util.server + response.data.data;
                    console.log('download_url:'+download_url)
                    setTimeout(function(){
                        ipcRenderer.send('download', download_url+',1,'+self.modalName+','+localStorage.getItem('projectname'))
                    },3000)
                } else {
                    self.$Message.success('代码生成：失败！');
                }
            }).catch(function (response) {
                console.log(response)
            })

        },
        handleAdd () {
            this.columnJson.push({
                columnName:'',
                dataType:'',
                constraintName:'',
                commentName:'',
                columnLen:''
            });
            this.columnJsonBak = this.columnJson
        },
        handleQuery (modalName,comments) {
            this.modalName = modalName
            this.modalCName = comments
            if(this.modalCName && this.modalCName.substr(this.modalCName.length-1)=='表'){
                this.modalCName = this.modalCName.substr(0,this.modalCName.length-1);
            }
            ipcRenderer.send('sendcontent',modalName)
        },
        handleRemove (index) {
            this.columnJson.splice(index,1);
            this.columnJsonBak = this.columnJson
        },
        handleShowItem(){
            let spn = this.modalName
            let spi = this.modalIcon
            let sp = this.modalCName
            if(spn=='' || spi=='' || sp==''){
                this.$Message.error({content: '基础信息尚未填写完整！', duration: 3})
                return
            }
            this.routerItemContent = '  编辑菜单项配置：<br/>' +
            '<br/>' +
            '     { path: \''+spn+'-edit\', title: \''+sp+'编辑\', name: \''+spn+'-edit\', component: () => import(\'@/views/manage/'+spn+'/'+spn+'-edit.vue\') },<br/>' +
            '<br/>' +
            '     列表菜单项配置：<br/>' +
            '<br/>' +
            '     {<br/>' +
            '     &nbsp;&nbsp;&nbsp;&nbsp;     path: \'/'+spn+'-manage\',<br/>' +
            '     &nbsp;&nbsp;&nbsp;&nbsp;     icon: \''+spi+'\',<br/>' +
            '     &nbsp;&nbsp;&nbsp;&nbsp;     name: \''+spn+'-manage\',<br/>' +
            '     &nbsp;&nbsp;&nbsp;&nbsp;     title: \''+sp+'管理\',<br/>' +
            '     &nbsp;&nbsp;&nbsp;&nbsp;     component: () => import(\'@/views/manage/'+spn+'/'+spn+'-manage.vue\')<br/>' +
            '     }'
            this.routerItemShow = true
        },
        handleSearch () {
            let keywords = this.keywords;
            let columnJson = this.columnJsonBak;
            let new_columnJson = [];
            new_columnJson.push(columnJson[0]);//主键ID字段不作过滤
            for(let i=1;i<columnJson.length;i++){
                let columnName = columnJson[i].columnName?columnJson[i].columnName:'';
                let dataType = columnJson[i].dataType?columnJson[i].dataType:'';
                let constraintName = columnJson[i].constraintName?columnJson[i].constraintName:'';
                let commentName = columnJson[i].commentName?columnJson[i].commentName:'';
                let columnLen = columnJson[i].columnLen?columnJson[i].columnLen:'';
                let concat_str = columnName + dataType + constraintName + commentName + columnLen;
                if(concat_str.indexOf(keywords) != -1){
                    new_columnJson.push(columnJson[i]);
                }
            }
            this.columnJson = new_columnJson;
        },
        handleSearchTable () {
            let keywords = this.modalName;
            let models = this.modelsBak;
            let new_models = [];
            for(let i=0;i<models.length;i++){
                let tablename = models[i].tablename?models[i].tablename:'';
                let comments = models[i].comments?models[i].comments:'';
                let concat_str = tablename + comments + (i+1);
                if(concat_str.indexOf(keywords) != -1 && new_models.length<10){
                    new_models.push(models[i]);
                }
            }
            this.models = new_models;
        }
    },
    mounted () {
        //清除全部消息监听
        ipcRenderer.removeAllListeners('tips', 'receivelist', 'receivecontent')
        //接收消息
        ipcRenderer.on('tips', (event, person) => {
            this.$Message.info({content: person, duration: 2})
        })
        //接收模块列表数据
        ipcRenderer.on('receivelist', (event, person) => {
            this.modelsBak = JSON.parse(person)
            this.models = [];
            let thesize = 10;
            if(!this.modelsBak || this.modelsBak.length==0) {
                thesize=0;
            }
            if(this.modelsBak && this.modelsBak.length<10) thesize=this.modelsBak.length;
            for(let i=0;i<thesize;i++){
                this.models.push(this.modelsBak[i]);
            }
        })
        //接收模块内容数据
        ipcRenderer.on('receivecontent', (event, person) => {
            this.columnJson = JSON.parse(person)
            this.columnJsonBak = this.columnJson
            this.keywords = ''
        })
        //初始化数据
        ipcRenderer.send('init',localStorage.getItem('mysqlhost')+','+localStorage.getItem('mysqluser')+','+localStorage.getItem('mysqlpassword')+','+localStorage.getItem('mysqlport')+','+localStorage.getItem('mysqldatabase')+','+localStorage.getItem('clientcodelist')+','+localStorage.getItem('servercodelist'))
    }
};
</script>
